<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="毛玻璃" name="1">
        <backdrop-filter></backdrop-filter>
      </el-tab-pane>
      <el-tab-pane label="混合模式" name="2">
        <video-mask-text></video-mask-text>
      </el-tab-pane>
      <el-tab-pane label="联系人" name="3">
        <name-card></name-card>
      </el-tab-pane>
      <el-tab-pane label="镜面" name="4">
        <card-reflection></card-reflection>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// 对背景应用滤镜，产生毛玻璃的效果
import BackdropFilter from './BackdropFilter'
// css3的混合模式
import VideoMaskText from './VideoMaskText'
// 联系人信息
import NameCard from './NameCard'
// 图片镜像效果
import CardReflection from './CardReflection'
export default {
  components: {
    BackdropFilter,
    VideoMaskText,
    NameCard,
    CardReflection
  },
  data() {
    return {
      activeName: '4'
    }
  }
}
</script>
